<template>
  <div class="order fixed-top">
    <!-- 引入公共头部 -->
    <NavBar title="订单详情" url="/user/order" fixed back/>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" style="padding-bottom: 100px">
    <!--订单编号-->
    <div class="van-cell van-panel__header">
      <div class="van-cell__title">
        <span>单号:{{list.orderNum}}</span>
      </div><div class="van-cell__value">
      <span>{{formatStatus(list.status)}}</span></div>
    </div>
    <!--订单商品-->
    <span @click="toGoods(item)" v-for='(item, index) in list.orderGoodsDetailRE' :key="index">
      <div class="van-card">
        <a href="javascript:;" class="van-card__thumb">
          <img class="van-card__img"
               :src="GLOBAL.baseImagePath + item.goodsUrl">
        </a>
        <div class="van-card__content" style="padding-top: 15px">
          <div class="van-card__left">
            <div class="van-card__title">{{item.goodsName}}</div>
            <div class="van-card__desc van-ellipsis">{{item.goodsProperty}}</div>
            <div  class="van-card__desc van-ellipsis" style="color: red;" v-if="goodsStatus(item)">{{goodsStatusInfo}}</div>
          </div>
          <div class="van-card__right">
            <div>¥ {{item.payPrice}}</div>
            <div class="van-card__origin-price">¥ {{item.goodsPrice}}</div>
            <div class="van-card__num">x {{item.goodsNum}}</div>
          </div>
        </div>
      </div>
    </span>
    <!--订单信息-->
    <div class="van-cell">
      <div class="van-cell__title">
        <div class="van-cell-group van-hairline--top-bottom">
          <div class="van-row">
            <div class="van-col van-col--20">
              <div class="van-cell">
                <div class="van-cell__title">
                  <div class="van-cell__label">商品总价</div>
                  <span>订单总价</span>
                </div>
              </div>
            </div>
            <div class="van-col van-col--4">
              <i class="van-cell__label van-card__origin-price">¥{{list.orderPrice}}</i>
              <i class="van-icon">¥ {{list.payPrice}}</i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 收货地址 -->
    <div class="van-cell van-contact-card">
    </div>
    <div class="van-cell van-contact-card">
      <i class="van-icon van-icon-contact van-cell__left-icon" style="padding-top: 10px"></i>
      <div class="van-cell__value van-cell__value--alone">
        <div>{{list.receiptName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{list.receiptTel}}</div>
        <div>地址：{{list.receiptAddress}}</div>
      </div>
    </div>
    </van-pull-refresh>
    <div class="van-submit-bar">
      <div class="van-submit-bar__bar">
        <div class="van-submit-bar__text">
        </div>
        <van-button size="small" @click="cancelOrder(list)" type="danger" v-if="list.status === 1">取消订单</van-button>
        <van-button  size="small"  @click="goPay(list)" v-if="list.status ===1">立即支付</van-button>
        <van-button size="small" @click="confirmGoods(list)" v-if="list.status === 4">确认收货</van-button>
        <span v-if="list.status !== 4"><span v-if="list.status !== 3"><van-button  size="small"  @click="goDelete(list)" v-if="list.status !==1">删除订单</van-button></span></span>
        <van-button  size="small"  @click="goOnceBuy(list)" v-if="list.status !==1">再次购买</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '../../components/common/NavBar.vue'
import orderApi from '../../api/order'
import detailAPI from '../../api/detail'
import { Toast } from 'vant'

export default {
  name: 'order',
  data () {
    return {
      goodsStatusInfo: '',
      isRefresh: false,
      list: [],
      imageUrl: ['http://udfstest.10101111.com/ucarudfs/resource/V2/201811/1/4-1ea10b6eaf434728af80521b10eaaf68-g-o-0.jpg']
    }
  },
  computed: {
  },
  mounted () {
    this.getOrderDetail()
  },
  methods: {
    onRefresh () {
      var _this = this
      Toast.loading({
        mask: true,
        duration: 1000,
        message: '加载中...'
      })
      setTimeout(() => {
        _this.getOrderDetail()
        _this.isRefresh = false
      })
    },
    // 商品状态
    goodsStatus: function (item) {
      if (item.isDelete === 1) {
        this.goodsStatusInfo = '商品已删除'
        return true
      } else {
        if (item.status === 0) {
          this.goodsStatusInfo = '商品已下架'
          return true
        } else {
          if (item.stock === 0) {
            this.goodsStatusInfo = '库存不足'
            return true
          }
        }
      }
      return false
    },
    formatStatus: function (val) {
      if (val === 1) {
        return '待付款'
      } else if (val === 2) {
        return '取消订单'
      } else if (val === 3) {
        return '待发货'
      } else if (val === 4) {
        return '待收货'
      } else if (val === 5) {
        return '已完成'
      }
    },
    toGoods: function (item) {
      if (item.isDelete === 1 || item.status === 0) {
        Toast('该商品已删除或已下架！')
      } else {
        this.$router.push({path: '/item/detail', query: {goodsId: item.goodsId}})
      }
    },
    getOrderDetail: function () {
      const _this = this
      orderApi.getOrderDetail(this.$route.query.orderId).then(function (res) {
        console.log(res)
        _this.list = res.data.re[0]
      })
    },
    // 取消订单
    cancelOrder: function (item) {
      var _this = this
      orderApi.cancelOrder(item.orderNum, item.status, item.orderId).then(function (res) {
        if (res.data.success) {
          Toast.success('取消订单成功')
          _this.getOrderDetail()
        } else {
          Toast.fail('取消订单失败')
        }
      })
    },
    // 确认收货
    confirmGoods: function (item) {
      var _this = this
      orderApi.confirmGoods(item.orderNum, item.status, item.orderId).then(function (res) {
        if (res.data.success) {
          Toast.success('确认收货成功')
          _this.getOrderDetail()
        } else {
          Toast.fail('确认收货失败')
        }
      })
    },
    // 立即支付
    goPay: function (item) {
      var _this = this
      var tempList = []
      var itemChild = item.orderGoodsDetailRE
      for (var i = 0; i < itemChild.length; i++) {
        var proper = {
          goodsId: itemChild[i].goodsId,
          propertyId: itemChild[i].goodsPropertyId,
          goodsNum: itemChild[i].goodsNum
        }
        tempList.push(proper)
      }
      var tempAddress = {
        receiptName: item.receiptName,
        receiptTel: item.receiptTel,
        receiptAddress: item.receiptAddress
      }
      _this.$router.push({path: '/cart/success', query: {tempAddress: tempAddress, orderId: item.orderId, goodsList: tempList, totalPrice: item.orderPrice}})
    },
    // 删除订单
    goDelete: function (item) {
      var _this = this
      orderApi.goDelete(item.orderId).then(function (res) {
        if (res.data.success) {
          Toast.success('订单已删除')
          _this.$router.push('/user/order')
        } else {
          Toast.fail('删除订单失败')
        }
      })
    },
    // 再次购买
    goOnceBuy (item) {
      var _this = this
      var temp = []
      var itemChild = item.orderGoodsDetailRE
      for (var i = 0; i < itemChild.length; i++) {
        var proper = {
          goodsId: itemChild[i].goodsId,
          propertyId: itemChild[i].goodsPropertyId,
          num: itemChild[i].goodsNum,
          orderId: item.orderId
        }
        temp.push(proper)
        detailAPI.addCartgoods(proper.propertyId, proper.num)
        sessionStorage.setItem('goodsList', JSON.stringify(temp))
        sessionStorage.setItem('totalPrice', item.orderPrice)
      }
      var tempAddress = {
        receiver: item.receiptName,
        telephone: item.receiptTel,
        addrDetail: item.receiptAddress
      }
      _this.$router.push({path: '/cart/confirm', query: {tempAddress: tempAddress}})
    }
  },
  components: {
    NavBar
  }
}
</script>
